.page-loader-wrapper {
    z-index: 99999999;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;    
    overflow: hidden;
    @extend .align-center;

    p {
        @extend .m-t-10;
        color: $col-white;
    }

    .loader {
        position: relative;
        top: calc(40% - 30px);
    }
}
.number-chart {
    .body{
        @extend .p-b-0;
    }

	.number {
        font-weight: $font-weight-600;
        
		> span {
			font-size: 22px;
			line-height: 1.4;
		}
	}
	canvas{
		width: 100% !important;
	}
}
.setting-list{	
	li{
		@extend .m-t-5;
	}
}
.info-box-2 {
    display: flex;
    cursor: default;    
    position: relative;
    overflow: hidden;    
    min-height: 130px;

    .icon {
        @extend .inlineblock;                

        i {            
            font-size: 30px;
            line-height: 70px;
        }
	}
	
	.chart {
		position: relative;
		width: 100px;
		@extend .align-center;
		@extend .displayblock;	
	}	
	
    .chart.chart-bar {
        height: 100%;        

        canvas {
            vertical-align: baseline !important;
        }
    }

    .chart.chart-pie {
        height: 100%;       

        canvas {
            vertical-align: baseline !important;
        }
    }

    .chart.chart-line {
        height: 100%;

        canvas {
            vertical-align: baseline !important;
        }
    }

    .content {
        @extend .inlineblock;
        padding: 7px 0px;

        .text {            
            margin-top: 11px;            
            color: $grey-500;
        }

        .number {
            font-weight: normal;
            font-size: 26px;
            color: $grey-700;
        }
    }
}
.top_counter{
    .icon{
        float: left;
        width: 50px;
        height: 50px;
        @extend .align-center;
        @extend .m-r-10;
        background: $grey-100;
        border-radius: $border-radius-large;
        i{
            font-size: 25px;
            line-height: 50px;
        }
    }
    .content{
        height: 50px;        
        .number{
            @extend .m-b-0;
        }
    }
}
.basic-list{
    @extend .m-b-0;
    li{
        @extend .displayblock;
        @extend .p-t-15;
        @extend .p-b-15;

        &:first-child{
            @extend .p-t-0;
        }
        &:last-child{
            @extend .p-b-0;
        }
        span{
            float: right;
        }
    }
}
.new_timeline {
    .header {       
        background: url(http://via.placeholder.com/275x120);
        background-size: cover;
        color: $col-white;
        position: relative;
        @extend .padding-0;

        .color-overlay {
            padding:2em;
            box-sizing: border-box;
            background: rgba(123, 94, 155, 0.5) ;
            line-height: normal;

            .day-number {
                font-size: 4em;
                @extend .inlineblock;
                @extend .m-r-15;
            }
                
            .date-right {
                @extend .inlineblock;
            }
                
            .day-name {
                font-size: 23px;
            }
                
            .month {
                text-transform: uppercase;
                font-weight: $font-weight-300;                
                letter-spacing: 2px;
                margin-top: 2px;
            }
        }
    }
  
    > ul {
        padding: 1em 0 0 2em;
        @extend .margin-0;
        list-style: none;
        position: relative;
        
        &::before {
        content: ' ';
        height: 100%;
        width: 1px;
        background-color: $grey-200;
        position: absolute;
        top: 0;
        left: 2.5em;
        z-index: 1;
        }
    }

    li div{
        @extend .inlineblock;
        margin: 1em 0;
        vertical-align: top;
    }

    .bullet {
        width: 1em;
        height: 1em;
        box-sizing: border-box;
        @include border-radius(50%);
        background: $col-white;
        z-index: 2;
        @extend .m-r-5;
        position: relative;
        
        &.pink {
        border: 2px solid $blush;
        }
        
        &.green {
        border: 2px solid $green;
        }
        
        &.orange {
        border: 2px solid $orange;
        }
    }

    .time {
        width: 20%;
        font-size: 0.75em;
        padding-top: 0.25em;
    }

    .desc {
        width: 65%;
    }

    h3 {
        font-size: 16px;
        font-weight: $font-weight-400;
        @extend .margin-0;
    }

    h4 {
        @extend .margin-0;
        font-size: 13px;
        font-weight: $font-weight-400;
        color: $grey-500;
    }

    .people img{
        width: 30px;
        height: 30px;
        @include border-radius(50%);
    }
}
.team-info{
    @extend .m-t-5;
    li{
        @extend .inlineblock;
        transition: all .25s ease;
        -webkit-transition: all .25s ease;
        -o-transition: all .25s ease;
        -moz-transition: all .25s ease;

        & + li{
            margin-left: -10px;
        }
        img{
            width:35px;
            @include border-radius(50%);
            border: 2px solid $col-white;
            box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
        }
        &:hover{
            -webkit-transform: translateY(-4px) scale(1.02);
            -moz-transform: translateY(-4px) scale(1.02);
            -ms-transform: translateY(-4px) scale(1.02);
            -o-transform: translateY(-4px) scale(1.02);
            transform: translateY(-4px) scale(1.02);            
            z-index: 999;
            img{
                -webkit-box-shadow: 0 14px 24px rgba(62,57,107,.2);
                box-shadow: 0 14px 24px rgba(62,57,107,.2);
            }
        }
    }
}
.team_list{
    .header-title{
        background: #f4f7f6;
    }
}
.b4gallery{
    .nav-item{
        @extend .m-r-5;
    }
    .gallery-item{
        &:hover{
            cursor: pointer;
        }
    }
}
.table-custom.table{

    border-collapse: collapse !important;
    thead{
        th{
            border-top:0; 
        }
    }
    tfoot{
        th{
            border-bottom:0; 
        }
    }
    tbody tr{
        &:hover{
            background-color: #f4f7f6;
        }
    }
}
.dt-bootstrap4{
    .dt-buttons,
    .dataTables_info{
        @extend .inlineblock;
        margin-bottom: 10px;

       + .dataTables_filter,
       + .dataTables_paginate{
            @extend .inlineblock;
            float: right;
        }
    }
}
.profile_state{
    @extend .align-center;
    i{
        font-size: 25px;
    }
}
.project_report{
    h6,
    .team-info{
        @extend .margin-0;
    }
}
.maintenance{
    background: #17191c;
}

// New by ssi
.top_report{
    .body{
        padding: 30px;
    }
}